<!--
 * @Descripttion: 
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2022-08-30 16:45:55
-->
<template>
  <Editor v-model="contentValue" :init="init" />
</template>
<script lang="ts" setup>
//引入tinymce编辑器
import Editor from '@tinymce/tinymce-vue'
const props = defineProps<{ height?: number }>()
const contentValue = ref(null)
const content = computed(() => contentValue.value)
defineExpose({ content })
const init = {
  language: 'zh_CN', //注意大小写
  selector: '#' + new Date().getTime(),
  plugins: 'powerpaste  wordcount preview fullscreen code', //插件配置
  toolbar:
    'fontsizeselect  bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify| numlist outdent indent | undo redo | lists table image | removeformat | fullscreen preview ', //工具栏配置，设为false则隐藏
  height: props.height || 500, //注：引入autoresize插件时，此属性失效
  /***********************************powerpast开始***********************************/
  powerpaste_word_import: 'merge', // 参数可以是 propmt, merge, clear，效果自行切换对比
  powerpaste_html_import: 'merge', // propmt, merge, clear
  powerpaste_allow_local_images: true,
  /***********************************powerpast结束***********************************/
  content_css: 'tinymce/skins/content/default/content.css',
  fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小
  // 	'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', //字体样式
  // lineheight_formats: '0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5', //行高配置，也可配置成"12px 14px 16px 20px"这种形式
  image_dimensions: true,
  // paste_as_text: true, //粘贴为纯文本
  // placeholder: '在这里输入文字',
  menubar: 'file edit view table tools help',
  // menu: {
  //   format: {
  //     title: '格式',
  //     items: 'bold italic underline strikethrough superscript subscript | removeformat',
  //   },
  // },
  branding: false, //tiny技术支持信息是否显示
  resize: true, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
  // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
  elementpath: false, //元素路径是否显示
  content_style: 'img{max-width:100%;height:auto;}', //设置行间距
  paste_data_images: true, //图片是否可粘贴
  toolbar_mode: 'wrap' //工具栏换行
  // images_upload_handler: (blobInfo: any, success: any, failure: any, progress: any) => {
  //   if (blobInfo.blob().size / 1024 / 1024 > 50) {
  //     failure('error')
  //     return
  //   }
  //   /**
  //    * 判断文件是file还是blob
  //    */
  //   //file
  //   if (blobInfo.blob().name) {
  //     const formData: any = new FormData()
  //     formData.append('multipartFile', blobInfo.blob())
  //     formData.append('areaId', 'CN')
  //     Apis.analyzeApi
  //       .upload_file(formData)
  //       .then(res => {
  //         let { code, customData } = res as any
  //         if (code === 200) {
  //           let imgUrl = customData[0].imgPath
  //           success(imgUrl) //上传成功，在成功函数里填入图片路径
  //         } else {
  //           failure('error')
  //           return
  //         }
  //       })
  //       .catch(err => failure('error'))
  //   } else {
  //     // blob转file
  //     let blob = blobInfo.blob()
  //     //生成随机数
  //     let randonNum = Math.random().toString().slice(1, 10).split('.').pop()
  //     const files = new window.File([blob], `${randonNum}.png`, {
  //       type: blob.type
  //     })
  //     const formData: any = new FormData()
  //     formData.append('multipartFile', files)
  //     formData.append('areaId', 'CN')
  //   }
  // }
}
</script>
